<template>
  <div class="content">
    <div class="title-box">
      <div class="content-title">
        <div class="active">商品</div>
        <div>详情</div>
      </div>
    </div>
    <div class="content-box">
      <swiper class="swiper" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
        <block v-for="item in goodinfo.banner" :key="item">
          <swiper-item class="goodsPic" >
              <img  :src="'http:'+item" />
          </swiper-item>
        </block>
      </swiper>
      <div class="goodsTitle">{{gooditem.itemtitle}}</div>
      <div class="goodsTag"><span class="iconfont icon-icon-check-empty" v-for="item in goodinfo.tag" :key="item">{{item.title}}</span></div>
      <!-- <div class="goodsPrice">
        <div class="goodsPrice-box">
          <span>券后包邮</span><span>￥{{gooditem.itemendprice}}</span>
        </div>
      </div> -->

    </div>
    <div class="content-middle card">
      <div class="goodsOldprice">在售价￥{{gooditem.itemprice}}</div>
      <div class="icon-box">
        <i class="iconfont icon-quan1"></i>
        <div class="goodsCat">￥{{gooditem.couponmoney}}</div>
      </div>
      <div class="goodsSales">
        <span class="goodsSales-color">{{gooditem.itemsale}}</span>人已买
      </div>
    </div>
    <div class="middle-introduce card">
      <div class="recommend-title">小编推荐：</div>
      <div class="recommend-wrapper">{{gooditem.itemdesc}}</div>
    </div>
    <!-- 商家信息-->
    <div class="seller card">
      <div class="seller-avatar"><img mode="widthFix" v-if="goodinfo.seller.shopIcon" :src="'http:'+goodinfo.seller.shopIcon" /></div>
      <div class="seller-info">
        <div class="seller-name">{{goodinfo.seller.shopName}}</div>
        <div class="seller-score">
          <span v-for="item in goodinfo.seller.evaluates" :key="item">
            {{item.title}}:<label v-if="item.level<0" style="color:green">{{item.score}}</label>
            <label v-else style="color:red">{{item.score}}</label>
          </span>
        </div>
      </div>
    </div>
    <div class="tuwen">
      <image mode="widthFix" v-for="item in goodinfo.tuwen" :key="item" :src="item"/>
    </div>
    <div class="footer">
      <div class="footer-left">
        <div class="foot_icon-box" @tap="shoucang">
          <i class="iconfont icon-shoucang2" ></i>
          <div class="shoucang">收藏</div>
        </div>
        <div class="foot_icon-box box2" @tap="dianzan">
          <i class="iconfont icon-fenxiang"></i>
          <div class="fenxiang">点赞</div>
        </div>
      </div>
      <div  class="footer-right"   @click="copytkl">
        <div class="foot_right-icon">
          <span>省</span><span>￥{{gooditem.couponmoney}}</span>
        </div>
        
        <div class="card-buy">立即领券</div>
      </div>
    </div>
  </div>
</template>
<script>
import network from '@/utils/network.js'

export default {
  data () {
    return {
      // 上一页传值
      gooditem: {},
      // 接口传值
      goodinfo: {
        tuwen: Object,
        taokouling: Object,
        seller: Object
      }
    }
  },
  methods: {
    shoucang () {
      wx.showToast({
        title: '已收藏',
        icon: 'success',
        duration: 2000
      })
    },
    dianzan () {
      wx.showToast({
        title: '已点赞',
        icon: 'success',
        duration: 2000
      })
    },
    copytkl () {
      var _this = this
      wx.setClipboardData({
        data: _this.goodinfo.taokouling,
        success: function (res) {
          wx.showModal({
            title: '提示',
            content: '领券成功',
            cancelText: '关闭窗口',
            success: function (res) {

            }
          })
        }
      })
    }
  },
  created (option) {

  },
  onLoad () {
    this.gooditem = this.$root.$mp.query
    var _this = this
    wx.request({
      url: `https://acs.m.taobao.com/h5/mtop.taobao.detail.getdetail/6.0/?data={%22itemNumId%22%3A%22${this.gooditem.id}%22}`,
      success: function (res) {
        _this.goodinfo.seller = res.data.data.seller
        _this.goodinfo.tag = JSON.parse(res.data.data.apiStack[0].value).consumerProtection.items
        _this.goodinfo.banner = res.data.data.item.images
      }
    })
    network
      .GET({
        url: `/api/supergooditem/${this.gooditem.id}`
      }).then(res => {
        this.goodinfo.tuwen = res.data.tuwen.images
        this.goodinfo.taokouling = res.data.taokouling
      })
  },
  onShow () {

  }

}

</script>
<style lang="less">
  page{
    background-color: #F2f2f2;
  }
  .card{
    margin-bottom:10rpx
  }
  .content{
    padding-top: 75rpx;
    padding-bottom: 110rpx;
    .title-box{
        position: fixed;
        top: 0;
        height: 75rpx;
        background: #ffffff;
        width: 100%;
        z-index: 99;
      .content-title{
        color: #414141;
        font-size: 27rpx;
        width: 222rpx;
        display: flex;
        margin: 0 auto;
        div{
          flex: 1;
          text-align: center;
          padding-bottom: 30rpx;
          margin-bottom: 2rpx;
        }
      }
    }
    .active{
      border-bottom: 2rpx solid #de555f;
      color: #de555f;
    }
    .content-box{
      background: white;
      padding: 0 0 16rpx 0;
    }
    .goodsTitle{
      padding: 0 17rpx;
      font-size: 30rpx;
      color: black;
      margin-bottom: 10rpx;
    }
    .goodsTag{
      padding:0 4rpx;
      span{
        color:red;
        font-size: 26rpx; 
        margin-left:10rpx;
      }
    }
    .goodsPrice{
      padding: 0 17rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 24rpx;
      .goodsPrice-box{
        display: flex;
        align-items: center;
        span:first-child{
          font-size: 23rpx;
          color: #f2511a;   
          margin-right: 23rpx;       
        }
        span:nth-child(2){
          font-size: 33rpx;
          color: #f2511a;
        }
      }
    }
    
  }
  .swiper{
    width: 100%!important;
    height: 750rpx!important;
    margin: 0 auto 34rpx auto;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .content-middle{
    box-sizing: border-box;
    padding: 0 17rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    height: 100rpx;
    .goodsOldprice{
      color: #bbb;
      text-decoration: line-through;
      font-size: 27rpx;
      width: 33%;
    }
    .icon-box{
      display: flex;
      align-items: center;
      width: 33%;
      justify-content: center;
      color: #FF9966;
      .icon-quan1{
        font-size: 40rpx; 
        line-height: 40rpx;
        display: flex;
        align-items: center;
      }
      .goodsCat{
        height: 33rpx;
        font-size: 25rpx;
        text-align: center;
        border-left: none;
        line-height: 33rpx;
      }
    }
    .goodsSales{
      width: 33%;
      text-align: right;
      font-size: 25rpx;
      .goodsSales-color{
        color: #FF9966;
      }
    }
  }
  .middle-introduce{
    background: white;
    padding: 20rpx 17rpx;
    .recommend-title{
      color: #1f1f1f;
      font-size: 27rpx;
      font-weight: bold;
    }
    .recommend-wrapper{
      font-size: 25rpx; 
      color: #808080; 
      margin-top: 10rpx;
    }
  }
  .seller{
    box-sizing: border-box;
    padding: 0 17rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    height: 150rpx;
    .seller-avatar{
      width:125rpx;
      height: 125rpx;
      margin-right: 39rpx;
        image {
        width: 100%;
        height: 100%;
        border: none;
      }
    }
    .seller-info{
      width:70%;
      .seller-name{
        font-size: 30rpx;
      }
      .seller-score{
        font-size: 25rpx;
        margin-top:5rpx;
      }
    }
  }
  .footer{
    background: white;
    z-index: 99;
    height: 100rpx;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 2rpx solid #ccc;
    .footer-left{
      display: flex;
      align-items: center;
      .foot_icon-box{
        padding: 0 47rpx;
        display: flex;
        align-items: center;
        i{
          font-size: 26rpx;
          color: #e7bbbc;
          margin-right: 16rpx;
        }
        div{
          font-size: 23rpx;
          color: #454545;
        }
      }
      .box2{
        border-left: 1px solid;
      }
    }
    .footer-right{
      width: 375rpx;
      height: 100%;
      background: #fa4a4a;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .foot_right-icon{
        color: #ffafb0;
        font-size: 23rpx;
        span:first-child{
          font-size: 30rpx;
          font-weight: bold;
          margin-right: 10rpx;
        }
      }
      .card-buy{
        font-size: 31rpx;
        color: white;
      }
    }
  }
  .tuwen{
    image{
      width:100%;
      height:100%;
      vertical-align:top;
    }
  }
</style>


